// 引入react
import React from 'react'
// 绑定事件与dom的绑定事件语法类似 语法:on+事件名称 = {事件处理程序} 比如:onClick = {()=>{}}

class Box extends React.Component{
    // 事件处理程序
    // 可以通过事件处理程序的参数获取到事件对象
    // React中的事件对象叫：合成事件(对象)
    // 合成事件：兼容所有浏览器，无需担心跨浏览器兼容问题
    handleClick() {
        console.log('我被点击了');
    }
    render () {
        return <button onClick = {this.handleClick} onMouseEnter={()=>{return console.log('鼠标移动事件我移动上来了');}}>单独抽离出来做组件，类组件是有状态的组件。他有自己的状态负责更新数据，让页面动起来</button>
    }
}

// 通过函数绑定的事件
function Bcs() {
    function handleMouse(params) {
        console.log('我是通过函数绑定的');
    }
    return <div onMouseEnter={handleMouse}>我是通过函数绑定的,函数组件中是没有this的，函数是无状态组件，只负责数据的展示</div>
    
}
// 导出组件
export  {
    Box,
    Bcs
}